<script setup lang="ts">
import { ref } from 'vue';
import CustomNavbar from './components/CustomNavbar.vue';
import type { BannerItem } from '@/types/home';

const bannerList = ref<BannerItem[]>([
  {
    id: 1,
    imgUrl: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg',
  },
  {
    id: 2,
    imgUrl: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg',
  },
  {
    id: 3,
    imgUrl: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg',
  },
]);

const isTriggered = ref();
// 下拉刷新
const onRefresherrefresh = () => {
  // 开始动画
  isTriggered.value = true;
  setTimeout(() => {
    // 关闭动画
    isTriggered.value = false;
  }, 3000);
};
// 触底事件
const onScrolltolower = () => {};
</script>

<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <CustomNavbar />
    <!-- 滚动容器 -->
    <scroll-view
      enable-back-to-top
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="onScrolltolower"
      refresher-enabled
      class="scroll-view"
      scroll-y
    >
      <template>
        <!-- 自定义轮播图 -->
        <XtxSwiper :list="bannerList" />
      </template>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>
